<template>
  <div id="app">
    <router-view class="ani-pager"/>
    <transition name="slide "></transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
    beforeRouteLeave(to, from, next) {
    //保存滚动条元素div的scrollTop值
    this.scrollY = document.querySelector(".shopcar").scrollTop;
    // console.log(this.scrollY)
    next();
  },
  //路由的钩子函数 当页面离开时触发
  //当页面离开的时候 保存当前的滚动条的距离
  activated() {
    document.querySelector(".shopcar").scrollTop = this.scrollY;
  },
  //组件的生命周期函数 被缓存的组件重新激活时触发
  //当页面重新激活的时候 把离开时保存的scrolltop 重新赋值给出现滚动条的div

  
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}

.slide-enter {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}
.ani-pager {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

</style>
